<template>
    <div class='contentUi'>
    <span class="label">{{test_label}}</span>
    <div class="components">
        <el-tooltip class="item" effect="dark" content="选择区间，请用','号隔开两个成绩" placement="top">
            <el-input v-model="testValue"  clearable class="input-with-select test" @blur="settestValueArray">
                <el-select v-model="testSelect" @change="settestValueArray" slot="prepend" placeholder="请选择" style="width:100px">
                    <el-option
                        v-for="item in testSelectoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-input>
        </el-tooltip>
    </div>
        
    </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
import {testSelectoptions} from '@/static/js/select_data.js';
   export default {
    props:{
        test_label:{
            type:String,
            default:"成绩"
        }
    },
    data() {
        return {
            testSelect:1,
            testValue:"",
        }
    },
    computed: {
        testSelectoptions(){
            return testSelectoptions;
        },
        ...mapState({
            getInput_testSelect:state=>state.pubilcModule.input_testSelect,
            getInput_testValue:state=>state.pubilcModule.input_testValue,
            getInput_testValueArray:state=>state.pubilcModule.input_testValueArray
        })
    },
    watch: {
        testValue(){
            this.setTestValue(this.testValue);
        },
        testSelect(){
            this.setTestSelect(this.testSelect)
        },
        getInput_testSelect(){
            //监听重置
            if(this.getInput_testSelect === ''){
                this.testSelect = 1;
            }
        },
        getInput_testValue(){
            //监听重置
            if(this.getInput_testValue === ''){
                this.testValue = '';
            }
        },
    },
    methods: {
        ...mapMutations({
            setTestSelect:'pubilcModule/setTestSelect',
            setTestValue:'pubilcModule/setTestValue',
            setTestValueLength:'pubilcModule/setTestValueLength'

        }),
        settestValueArray(){
            //处理输入的值
            if(this.testValue!==""){
                if(this.testSelect === 6){
                    if(this.testValue.indexOf(',')!== -1){
                        let arr = this.testValue.split(",");
                        if(arr.length === 2){
                         
                            this.setTestValue(arr)
                        }else{
                            this.setTestValueLength();
                            this.$message.error("只能输两个数字的区间哦！");
                        }
                    }else{
                        this.setTestValueLength();
                        this.$message.error("两个分数用英文的','号隔开");
                    };
                }else{
                    //如果不是数字就报错
                    if(/^\d*$/.test(this.testValue)){
                        let arr = [this.testValue];
                        
                        this.setTestValue(arr)
                    }else{
                        this.setTestValueLength();
                        this.$message.error("请输入数字!");
                    }
                }
            };
        }
    },
   }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.contentUi{
    display:flex;
    justify-content:flex-start;
}

</style>
